<template>
  <div>
    <div id="mapContainerTD" class="divTdtMap">
    </div>
    <div class="imgBox">
      <img src="@/assets/img/zhwl/weather.png" ref="weather">
      <img src="@/assets/img/zhwl/soil.png" ref="soil">
      <img src="@/assets/img/zhwl/water.png" ref="water">
      <img src="@/assets/img/zhwl/insect.png" ref="insect">
      <img src="@/assets/img/zhwl/monitor.png" ref="monitor">
    </div>
  </div>
</template>
<script>
import { mapList } from "@/assets/js/map";
// import { getDeviceInfo } from "@/api/zhwl";

export default {
  name: "TiandituMap",
  props: {
    areaList: {
      type: Array,
      default: () => []
    },
    areaCode: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      mapTD: null,
      map: null,
      polygonCollect: [],
      mapData: [],
    };
  },
  components: {
  },
  mounted() {
    // 初始化天地图
    this.initTdtMap();
  },
  methods: {
    // 图标
    getIconUrl(type) {
      let url = "";
      switch (type) {
        case "weather":
          url = this.$refs.weather.src;
          break;
        case "soil":
          url = this.$refs.soil.src;
          break;
        case "water":
          url = this.$refs.water.src;
          break;
        case "insect":
          url = this.$refs.insect.src;
          break;
        case "camera":
          url = this.$refs.monitor.src;
          break;
      }
      return url

    },
    // 初始化地图
    initTdtMap() {
      // let _this = this; //将方法放在mounted，会有指向问题，定义this使用就会正常
      let zoom = 11; //地图的初始化级别，及放大比例
      /* eslint-disable no-undef */
      this.map = new T.Map("mapContainerTD");
      this.map.addControl(window.TMAP_HYBRID_MAP); // 创建卫星和路网的混合视图
      this.map.centerAndZoom(new T.LngLat(119.45023, 33.21582), zoom); //地图的初始化中心点
      this.mapData = mapList; // 地图数据
      
      this.map.addEventListener("zoomend", function () {
        // 缩放
      });

      this.map.addEventListener("click", function () {

        //点击事件
        // console.log(e);
      });
      if (this.areaList && this.areaList.length > 0) {
        this.areaList.map((info) => {
          var icon = new T.Icon({
            iconUrl: this.getIconUrl(info.deviceType),
            iconSize: new T.Point(29, 29),
            // iconAnchor: new T.Point(10, 25)
          });
          const infoPosition = info.geographicCoordinates.split(",");
          const point = new T.LngLat(infoPosition[0], infoPosition[1]);
          const marker = new T.Marker(point, { icon: icon });
          marker.id = "biaozhu";
          marker.info = info;
          
          // 点击坐标点
          marker.addEventListener("click", async () => {
            // const res = await getDeviceInfo(e.target.info.id);
            // const resData = res.data.data;
            var infoWin1 = new T.InfoWindow();
            // let sContent;
            // switch (e.target.info.deviceType) {
            //   case "weather":
            //     sContent =
            //       `<div>
            //       <div style="font-size:18px;margin:10px 0;">气象数据</div>
            //       <div>
            //         <div style="line-height:1.5">所属公司：<span>${info.companyName}</span></div>
            //         <div style="line-height:1.5">所属区域：<span>${info.areaName}</span></div>
            //         <div style="line-height:1.5">设备名称：<span>${info.deviceName}</span></div>
            //       </div>
            //       <div style="margin: 20px 0;display:flex;flex-wrap:wrap;">
            //         <div style="display:flex; align-items:center;width:50%;margin:10px 0">
            //           <div>
            //             <div class="iconfont icon-wendu"></div>
            //           </div>
            //           <div>
            //             <div>空气温度</div>
            //             <div>${resData.airTemperature}°C</div>
            //           </div>  
            //         </div>
            //         <div style="display:flex; align-items:center;width:50%;margin:10px 0">
            //           <div>
            //             <div style="font-size: 36px;" class="iconfont icon-turangshidu"></div>
            //           </div>
            //           <div style="margin-left: 10px;">
            //             <div>空气湿度</div>
            //             <div>${resData.airHumidity}%RH</div>
            //           </div>  
            //         </div>
            //         <div style="display:flex; align-items:center;width:50%;margin:10px 0">
            //           <div>
            //             <div style="font-size: 36px;" class="iconfont icon-light"></div>
            //           </div>
            //           <div style="margin-left: 10px;">
            //             <div>光照度</div>
            //             <div>${resData.lightIntensity}LUX</div>
            //           </div>  
            //         </div>
            //         <div style="display:flex; align-items:center;width:50%;margin:10px 0">
            //           <div>
            //             <div style="font-size: 36px;" class="iconfont icon-daqiyali"></div>
            //           </div>
            //           <div style="margin-left: 10px;">
            //             <div>大气压力</div>
            //             <div>${resData.lightIntensity}HPa</div>
            //           </div>  
            //         </div>
            //         <div style="display:flex; align-items:center;width:50%;margin:10px 0">
            //           <div>
            //             <div style="font-size: 36px;" class="iconfont icon-fengsu"></div>
            //           </div>
            //           <div style="margin-left: 10px;">
            //             <div>风速</div>
            //             <div>${resData.windSpeed}m/s</div>
            //           </div>  
            //         </div>
            //         <div style="display:flex; align-items:center;width:50%;margin:10px 0">
            //           <div>
            //             <div style="font-size: 36px;" class="iconfont icon-fengsu"></div>
            //           </div>
            //           <div style="margin-left: 10px;">
            //             <div>风级</div>
            //             <div>${resData.windLevel}HPa</div>
            //           </div>  
            //         </div>
            //         <div style="display:flex; align-items:center;width:50%;margin:10px 0">
            //           <div>
            //             <div style="font-size: 36px;" class="iconfont icon-wind-direction"></div>
            //           </div>
            //           <div style="margin-left: 10px;">
            //             <div>风向</div>
            //             <div>${resData.windDirection}</div>
            //           </div>  
            //         </div>
            //         <div style="display:flex; align-items:center;width:50%;margin:10px 0">
            //           <div>
            //             <div style="font-size: 36px;" class="iconfont icon-rain"></div>
            //           </div>
            //           <div style="margin-left: 10px;">
            //             <div>总降雨量</div>
            //             <div>${resData.todayRainfall}mm</div>
            //           </div>  
            //         </div>
            //       </div>
            //       </div>`;
            //     break;
            //   case "soil":
            //     sContent =
            //       `<div>
            //       <div style="font-size:18px;margin:10px 0;">土壤数据</div>
            //       <div>
            //         <div style="line-height:1.5">所属公司：<span>${info.companyName}</span></div>
            //         <div style="line-height:1.5">所属区域：<span>${info.areaName}</span></div>
            //         <div style="line-height:1.5">设备名称：<span>${info.deviceName}</span></div>
            //       </div>
            //       <div style="margin: 20px 0;display:flex;flex-wrap:wrap;">
            //         <div style="display:flex; align-items:center;width:50%;margin:10px 0">
            //           <div>
            //             <div class="iconfont icon-turangwendu"></div>
            //           </div>
            //           <div>
            //             <div>土壤温度</div>
            //             <div>${resData.soilTemperature}°C</div>
            //           </div>  
            //         </div>
            //         <div style="display:flex; align-items:center;width:50%;margin:10px 0">
            //           <div>
            //             <div style="font-size: 36px;" class="iconfont icon-turangshidu"></div>
            //           </div>
            //           <div style="margin-left: 10px;">
            //             <div>土壤湿度</div>
            //             <div>${resData.soilHumidity}%</div>
            //           </div>  
            //         </div>
            //         <div style="display:flex; align-items:center;width:50%;margin:10px 0">
            //           <div>
            //             <div style="font-size: 36px;" class="iconfont icon-turangpH"></div>
            //           </div>
            //           <div style="margin-left: 10px;">
            //             <div>土壤PH</div>
            //             <div>${resData.soilPh}</div>
            //           </div>  
            //         </div>
            //         <div style="display:flex; align-items:center;width:50%;margin:10px 0">
            //           <div>
            //             <div style="font-size: 36px;" class="iconfont icon-turangdiandaoshuai"></div>
            //           </div>
            //           <div style="margin-left: 10px;">
            //             <div>土壤导电率</div>
            //             <div>${resData.soilConductivity}S/m</div>
            //           </div>  
            //         </div>
            //       </div>
            //       </div>`;
            //     break;
            //   case "water":
            //   sContent =
            //       `<div>
            //       <div style="font-size:18px;margin:10px 0;">水质数据</div>
            //       <div>
            //         <div style="line-height:1.5">所属公司：<span>${info.companyName}</span></div>
            //         <div style="line-height:1.5">所属区域：<span>${info.areaName}</span></div>
            //         <div style="line-height:1.5">设备名称：<span>${info.deviceName}</span></div>
            //       </div>
            //       <div style="margin: 20px 0;display:flex;flex-wrap:wrap;">
            //         <div style="display:flex; align-items:center;width:50%;margin:10px 0">
            //           <div>
            //             <div class="iconfont icon-wendu"></div>
            //           </div>
            //           <div>
            //             <div>水温</div>
            //             <div>${resData.waterTp}°C</div>
            //           </div>  
            //         </div>
            //         <div style="display:flex; align-items:center;width:50%;margin:10px 0">
            //           <div>
            //             <div style="font-size: 36px;" class="iconfont icon-turangpH"></div>
            //           </div>
            //           <div style="margin-left: 10px;">
            //             <div>PH值</div>
            //             <div>${resData.waterPh}%</div>
            //           </div>  
            //         </div>
            //         <div style="display:flex; align-items:center;width:50%;margin:10px 0">
            //           <div>
            //             <div style="font-size: 36px;" class="iconfont icon-IOTtubiao_huabanfuben"></div>
            //           </div>
            //           <div style="margin-left: 10px;">
            //             <div>导电率</div>
            //             <div>${resData.waterCond}S/m</div>
            //           </div>  
            //         </div>
            //         <div style="display:flex; align-items:center;width:50%;margin:10px 0">
            //           <div>
            //             <div style="font-size: 36px;" class="iconfont icon-yangqi"></div>
            //           </div>
            //           <div style="margin-left: 10px;">
            //             <div>溶解氧</div>
            //             <div>${resData.waterDo}</div>
            //           </div>  
            //         </div>
            //       </div>
            //       </div>`;
            //     break;
            //   case "insect":
            //     sContent =
            //       `<div style="width: 300px;">
            //       <div style="font-size:18px;margin:10px 0;">虫情数据</div>
            //       <div style="font-size: 14px;">
            //         <div style="line-height:1.5">所属公司：<span>${info.companyName}</span></div>
            //         <div style="line-height:1.5">所属区域：<span>${info.areaName}</span></div>
            //         <div style="line-height:1.5">设备名称：<span>${info.deviceName}</span></div>
            //       </div>
            //       <div style="margin:20px 0" >
            //         <img style="width:100%;height:auto" src="${resData.dataImg}"/>
            //       </div>
            //       </div>`;
            //     break;
            //   case "camera":
            //     sContent =
            //       `<div style="width: 300px;">
            //       <div style="font-size:18px;margin:10px 0;">监控数据</div>
            //       <div style="font-size: 14px;">
            //         <div style="line-height:1.5">所属公司：<span>${info.companyName}</span></div>
            //         <div style="line-height:1.5">所属区域：<span>${info.areaName}</span></div>
            //         <div style="line-height:1.5">设备名称：<span>${info.deviceName}</span></div>
            //       </div>
            //       </div>`;
            //     break;
            // }

            let sContent =`<div>
                  <div style="font-size:18px;margin:10px 0;">土壤数据</div>
                  <div>
                    <div style="line-height:1.5">所属公司：<span>1</span></div>
                    <div style="line-height:1.5">所属区域：<span>2</span></div>
                    <div style="line-height:1.5">设备名称：<span>3</span></div>
                  </div>
                  <div style="margin: 20px 0;display:flex;flex-wrap:wrap;">
                    <div style="display:flex; align-items:center;width:50%;margin:10px 0">
                      <div>
                        <div class="iconfont icon-turangwendu"></div>
                      </div>
                      <div>
                        <div>土壤温度</div>
                        <div>4°C</div>
                      </div>  
                    </div>
                    <div style="display:flex; align-items:center;width:50%;margin:10px 0">
                      <div>
                        <div style="font-size: 36px;" class="iconfont icon-turangshidu"></div>
                      </div>
                      <div style="margin-left: 10px;">
                        <div>土壤湿度</div>
                        <div>5%</div>
                      </div>  
                    </div>
                    <div style="display:flex; align-items:center;width:50%;margin:10px 0">
                      <div>
                        <div style="font-size: 36px;" class="iconfont icon-turangpH"></div>
                      </div>
                      <div style="margin-left: 10px;">
                        <div>土壤PH</div>
                        <div>6</div>
                      </div>  
                    </div>
                    <div style="display:flex; align-items:center;width:50%;margin:10px 0">
                      <div>
                        <div style="font-size: 36px;" class="iconfont icon-turangdiandaoshuai"></div>
                      </div>
                      <div style="margin-left: 10px;">
                        <div>土壤导电率</div>
                        <div>8S/m</div>
                      </div>  
                    </div>
                  </div>
                  </div>`


            infoWin1.setContent(sContent);
            marker.openInfoWindow(infoWin1);
            // let newMarker = _this.map.getOverlays(); // 获取到了地图上的所有点
            // for (let i = 0; i < newMarker.length; i++) {
            //   if (newMarker[i].id == 'label') {
            //     _this.map.removeOverLay(newMarker[i])
            //   }
            // };
            // const label = new T.Label({
            //   text: info.deviceName,
            //   position: marker.getLngLat(),
            //   offset: new T.Point(-50, -30),
            // });
            // label.id = "label";
            // label.setBackgroundColor("#3C5DC9");
            // label.setFontColor("#fff");
            // label.setBorderLine(0);
            // _this.map.addOverLay(label);


          });
          this.map.addOverLay(marker);
        });
      }

      this.drawRegion(); // 绘制各个乡镇
    },
    // 绘制宝应县
    drawCity(params) {
      var T = window.T;
      var points = [];
      params.split(";").forEach((item) => {
        points.push(new T.LngLat(item.split(",")[0], item.split(",")[1]));
      });
      this.polygonCity = new T.Polygon(points, {
        color: "#00c6ff",
        weight: 2,
        opacity: 1,
        fillOpacity: 0,
      });
      // this.map.addOverLay(this.polygonCity);
      // this.map.setViewport(points);
    },
    // 绘制各个乡镇
    drawRegion() {
      var T = window.T;
      // const _this = this;
      this.mapData.children.forEach((item) => {
        const points = [];
        item.points.split(";").forEach((item) => {
          points.push(new T.LngLat(item.split(",")[0], item.split(",")[1]));
        });
        const polygon = new T.Polygon(points, {
          id: item.id,
          name: item.name,
          color: "#00c6ff",
          weight: 2,
          opacity: 1,
          fillColor: "#101a34",
          fillOpacity: 0.7,
          lineStyle: "dashed",
        });
        this.map.addOverLay(polygon);
        this.polygonCollect.push(polygon);
        polygon.addEventListener("click", this.drawClick);
        this.polygonCollect.push(polygon);

      });
      for (let i = 0; i < this.polygonCollect.length; i++) {
        if (this.polygonCollect[i].options.id == this.areaCode) {
          this.polygonCollect[i].setColor("#fca800");
          this.polygonCollect[i].setFillColor("#ffb52b");
          this.polygonCollect[i].setFillOpacity(0.85);
        }
      }
    },
    // 点击地区事件
    drawClick(e) {
      if(e){
        const p = e.target.options;
      this.drawRegionOn(p.id); // 显示高亮
      this.$emit("areaClick", p.id)
      }
      
    },
    // 高亮显示
    drawRegionOn(id) {
      // 显示高亮
      this.polygonCollect.forEach((item) => {
        // 初始化
        item.setColor("#00c6ff");
        item.setFillColor("#101a34");
        item.setFillOpacity(0.7);
      });
      for (let i = 0; i < this.polygonCollect.length; i++) {
        if (this.polygonCollect[i].options.id === id) {
          this.polygonCollect[i].setColor("#fca800");
          this.polygonCollect[i].setFillColor("#ffb52b");
          this.polygonCollect[i].setFillOpacity(0.85);
        }
      }
    },
  },
};
</script>

<style scoped  lang='scss'>
.divTdtMap {
  width: 100%;
  height: 100%;
  opacity: 1;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;

}

::v-deep .tdt-infowindow-content-wrapper {
  width: 400px;
  background: rgba(48, 65, 86, .9);
  color: #fff;
  font-size: 14px;
}

::v-deep .tdt-infowindow-tip {
  background: rgba(48, 65, 86, .9);
}

::v-deep .tdt-infowindow-content {
  width: 100% !important;
}

::v-deep .iconfont {
  font-size: 36px;
  margin-right: 10px;
  color: #409eff;
  border: 1px solid #409eff;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  text-align: center;
  line-height: 45px;
}

.imgBox {
  display: none;
}
</style>
